<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ include file="menu.jsp" %>


<link type="text/css" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
<link type="text/css" href="../css/newOrder.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="../js/ui.datetimepicker.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        // dateTimePicker
        $('.datetimepicker').datetimepicker({ dateFormat: 'dd-mm-yy',timeFormat: ' hh:ii:ss' });


        $(".order").find("a").click(function() {
            window.location = $(this).attr("href");
        });


        $(".order").click(function() {
            $(this).next(".order_info").slideToggle(500)
            return false;
        });

        $("#add_application").click(function() {
            $("#categories").show()
            $("#categories option[value=default]").show()
            $("#categories option[value=default]").attr('selected', 'selected')
            return false;
        });

        $("#categories").change(function() {
            var currentCategory = $(this).val();
            $("#categories option[value=default]").hide();
            $("#apps").show();
            $("#add").show()
            if (currentCategory != '') {
                $("#apps").load('getApplications.htm', { 'curCat' : currentCategory });
            }
        });

        $("#add").click(function() {
            var application = $("#apps option:selected").text();
            var applicationId = $("#apps").val();
            var text = $("#results").find("option:eq(" + applicationId + ")").text();
            if ($('#results option[value=' + applicationId + ']').length > 0) {
                alert('Element already exists');
                return false;
            } else {
                $("#results").append("<option value='" + applicationId + "'>" + application + "</option>")
                return false;
            }

        });


        $("#delete").click(function() {
            if (typeof $("#results option:selected").val() === "undefined") {
                alert('Выберите элемент!')
                return false;
            }
            $("#results option:selected").remove()
            return false;


        });


        $("#submit").click(function() {
            $("#results option").attr('selected', 'yes');
        });


        $(".popup").hover(function() {
            $(this).next("div").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
        }, function() {
            $(this).next("div").animate({opacity: "hide", top: "-70"}, "fast");
        });


        $(function () {
            $('.bubbleInfo').each(function () {
                // options
                var distance = 10;
                var time = 250;
                var hideDelay = 300;

                var hideDelayTimer = null;

                // tracker
                var beingShown = false;
                var shown = false;

                var trigger = $('.trigger', this);
                var popup = $('.popup', this).css('opacity', 0);

                // set the mouseover and mouseout on both element
                $([trigger.get(0), popup.get(0)]).mouseover(function () {
                    // stops the hide event if we move from the trigger to the popup element
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);

                    // don't trigger the animation again if we're being shown, or already visible
                    if (beingShown || shown) {
                        return;
                    } else {
                        beingShown = true;

                        // reset position of popup box
                        popup.css({
                            top: -20,
                            right: -20,
                            display: 'block' // brings the popup back in to view
                        })

                            // (we're using chaining on the popup) now animate it's opacity and position
                                .animate({
                            top: '-=' + distance + 'px',
                            opacity: 1
                        }, time, 'swing', function() {
                            // once the animation is complete, set the tracker variables
                            beingShown = false;
                            shown = true;
                        });
                    }
                }).mouseout(function () {
                    // reset the timer if we get fired again - avoids double animations
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);

                    // store the timer so that it can be cleared in the mouseover if required
                    hideDelayTimer = setTimeout(function () {
                        hideDelayTimer = null;
                        popup.animate({
                            top: '-=' + distance + 'px',
                            opacity: 0
                        }, time, 'swing', function () {
                            // once the animate is complete, set the tracker variables
                            shown = false;
                            // hide the popup entirely after the effect (opacity alone doesn't do the job)
                            popup.css('display', 'none');
                        });
                    }, hideDelay);
                });
            });
        });

    });


    function removeElement(element) {
        $(element).parent().next("br").remove();
        $(element).parent().remove();
    }
</script>

<style type="text/css">

     .grid td{
        text-align:center;
    }

    .high_priority {
        text-align: center;
        background-color: #ff5c5c;
    }

    .medium_priority {
        text-align: center;
        background-color: #f6bf5a;
    }

    .low_priority {
        text-align: center;
        background-color: #f6f682;
    }

    .order {
    / / padding-bottom : 5 px;
    }

    .order_info table {
         margin-left:15px;
		background-color: #FFFF99;
		border-collapse:collapse;

    }

    .order_info td{
       padding-left:10px;
    }

     .order_info {
        width: 300px;
    }

    .bubbleInfo {
        position: relative;
    }

    .popup {
        position: absolute;
        display: none;
        background-color:aquamarine;
        width:70px;
        height:50px;
    }


</style>


<div class="title">Управление заявками</div>
<br>

<div class="grid">


    <table>
        <tr class="table_head">
            <td width="3%">№</td>
            <td width="20%">Период</td>
            <td width="10%">Приоритет</td>
            <security:authorize ifAllGranted="ROLE_ADMIN">
                <td width="20%">Пользователь</td>
            </security:authorize>
            <td width="10%">Статус</td>
            <security:authorize ifAllGranted="ROLE_ADMIN">
                <td width="20%">Ресурс</td>
                <td width="10%">Хост</td>
            </security:authorize>
            <td width="3%"></td>
            <td width="3%"></td>

        </tr>
    </table>
    <c:set var="count" value="0" scope="page"/>
    <c:forEach items="${orders}" var="o">

        <c:set var="count" value="${count + 1}" scope="page"/>
        <div class="order">
            <table>
                <tr <c:if test="${(count % 2) == 0}"><c:out value="class=table_row_1"/></c:if> >

                    <td width="3%"><c:out value="${o.orderId}"/></td>
                    <c:set var="start" value="${o.startDate}"/>
                    <c:set var="finish" value="${o.finishDate}"/>

                    <td width="20%"><c:out value="${fn:substring(start,0,10)}"/> - <c:out
                            value="${fn:substring(finish,0,10)}"/></td>
                    <c:set var="priority" value="${o.priority.priorityName}"/>
                    <td width="10%"
                            <c:if test="${priority eq 'low'}"><c:out value="class=low_priority"/></c:if>
                            <c:if test="${priority eq 'medium'}"><c:out value="class=medium_priority"/></c:if>
                            <c:if test="${priority eq 'high'}"><c:out value="class=high_priority"/></c:if>

                            ><c:out value="${o.priority.alias}"/>
                    </td>

                    <security:authorize ifAllGranted="ROLE_ADMIN">
                        <td width="20%"><c:out value="${o.user.lastName}"/> <c:out value="${o.user.firstName}"/></td>
                    </security:authorize>


                    <c:set var="statusName" value="${o.status.statusName}"/>
                    <td width="10%"
                            <c:if test="${statusName eq 'submitted'}"><c:out value="class=submitted"/></c:if>
                            <c:if test="${statusName eq 'in_progress'}"><c:out value="class=in_progress"/></c:if>
                            <c:if test="${statusName eq 'approved'}"><c:out value="class=approved"/></c:if>
                            <c:if test="${statusName eq 'declined'}"><c:out value="class=declined"/></c:if>
                            >
                        <c:out value="${o.status.alias}"/></td>

                    <security:authorize ifAllGranted="ROLE_ADMIN">
                        <td width="20%">
                            <c:choose>
                                <c:when test="${o.resource ne null}">
                                    Назначено <c:out value="${o.resource.hostName}"/>
                                </c:when>
                                <c:otherwise>
                                    Не назначено
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td width="10%">
                            <c:choose>
                                <c:when test="${o.resource.host ne null}">
                                    <c:out value="${o.resource.host.hostName}"/>
                                </c:when>
                                <c:otherwise>


                                    <div class="bubbleInfo">
                                        <img class="trigger" src="../images/comment.png"/>

                                        <div class="popup">
                                            <c:forEach items="${o.appropriateHosts}" var="h">
                                                <c:out value="${h}"/>&nbsp;
                                            </c:forEach>
                                        </div>
                                    </div>


                                </c:otherwise>
                            </c:choose>


                        </td>
                    </security:authorize>


                    <c:set var="editValue" value="/user/createOrder.htm"/>
                    <c:set var="deleteValue" value="/user/deleteOrder.htm"/>

                    <security:authorize ifAllGranted="ROLE_ADMIN">
                        <c:set var="editValue" value="/admin/createOrder.htm"/>
                        <c:set var="deleteValue" value="/admin/deleteOrder.htm"/>
                    </security:authorize>


                    <c:url var="editUrl" value="${editValue}">
                        <c:param name="action" value="edit"/>
                        <c:param name="orderId" value="${o.orderId}"/>
                    </c:url>
                    <c:url var="deleteUrl" value="${deleteValue}">
                        <c:param name="action" value="delete"/>
                        <c:param name="orderId" value="${o.orderId}"/>
                    </c:url>
                    <td width="3%"><a href="${editUrl}"><img style="border:0px;" src="../images/edit.png"
                                                                            alt="Edit"></a></td>
                    <td width="3%"><a href="${deleteUrl}"><img style="border:0px;"
                                                                              src="../images/delete_red.png"
                                                                              alt="Delete"></a></td>
                </tr>
            </table>
        </div>

        <div class="order_info" style="display:none;">

            <table border="1">
                <tr style="background-color:#a1ffa6;">
                    <td colspan="2">Подробная информация</td>
                </tr>
                <tr>
                    <td class="label">CPU, GHz</td>
                    <td><c:out value="${o.cpu}"/> GHz</td>
                </tr>
                <tr>
                    <td class="label">RAM, GB</td>
                    <td><c:out value="${o.ram}"/> Gb</td>
                </tr>
                <tr>
                    <td class="label">HDD, GB</td>
                    <td><c:out value="${o.hdd}"/> Gb</td>
                </tr>
                <tr>
                    <td class="label">Проект</td>
                    <td><c:out value="${o.project.projectName}"/></td>
                </tr>
                <security:authorize ifAllGranted="ROLE_ADMIN">
                    <tr>
                        <td class="label">Пользователь</td>
                        <td><c:out value="${o.user.lastName}"/> <c:out value="${o.user.firstName}"/></td>
                    </tr>
                </security:authorize>
                <tr>
                    <td class="label">Описание</td>
                    <td><c:out value="${o.description}"/></td>
                </tr>
            </table>
        </div>
    </c:forEach>

</div>

<div class="messages">

    <c:if test="${requestScope.errorMessage ne null}">
        <c:out value="${requestScope.errorMessage}"/>
    </c:if>

</div>

<br>

<div class="form">
    <form:form commandName="newOrder">
        <fieldset>
            <table>
                <tr>
                    <td>CPU, GHz <span class="required">*</span></td>
                    <td><form:select path="cpu">
                        <c:forEach items="${cpuList}" var="cpu">
                            <form:option value="${cpu}" label="${cpu} GHz"/>
                        </c:forEach>
                    </form:select>
                    </td>
                    <td><form:errors path="cpu" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>HDD, Gb <span class="required">*</span></td>
                    <td><form:select path="hdd">
                        <c:forEach items="${hddList}" var="hdd">
                            <form:option value="${hdd}" label="${hdd} Gb"/>
                        </c:forEach>
                    </form:select>

                    </td>
                    <td><form:errors path="hdd" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>RAM, Gb <span class="required">*</span></td>
                    <td><form:select path="ram">
                        <c:forEach items="${ramList}" var="ram">
                            <form:option value="${ram}" label="${ram} Gb"/>
                        </c:forEach>
                    </form:select>
                    </td>
                    <td><form:errors path="ram" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>Start Date <span class="required">*</span></td>
                    <td><form:input path="startDate" cssClass="datetimepicker"/></td>
                    <td><form:errors path="startDate" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>Finish Date <span class="required">*</span></td>
                    <td><form:input path="finishDate" cssClass="datetimepicker"/></td>
                    <td><form:errors path="finishDate" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>Priority <span class="required">*</span></td>
                    <td>
                        <form:select path="priority">
                            <form:options items="${priorities}" itemValue="priorityId" itemLabel="alias"/>
                        </form:select>
                    </td>
                    <td><form:errors path="status" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>Project <span class="required">*</span></td>
                    <td><form:select path="project">
                        <form:options items="${projects}" itemValue="projectId" itemLabel="projectName"/>
                    </form:select>

                    </td>
                    <td><form:errors path="project" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>Applications</td>
                    <td>
                        <form:select path="applications" multiple="multiple" size="5" id="results">
                            <c:if test="${editedOrder ne null}">
                                <c:forEach items="${editedOrder.applications}" var="a">
                                    <option value="${a.applicationId}"><c:out value="${a.applicationName}"/></option>
                                </c:forEach>
                            </c:if>
                        </form:select>

                        <div>
                            <a href="#" id="add_application"><img style="border:0px;" src="../images/add.png"
                                                                  alt="add application"></a>&nbsp;
                            <a href="#" id="delete"><img style="border:0px;" src="../images/delete.png"
                                                         alt="remove application"></a>
                        </div>

                    </td>
                    <td>
                        <select id="categories" style="display:none;">
                            <option selected="selected" value="default">Выберите категорию</option>
                            <c:forEach items="${categories}" var="c">
                                <option value="${c.categoryId}"><c:out value="${c.categoryName}"/></option>
                            </c:forEach>
                        </select>
                        <select id="apps" style="display:none;"></select>
                        <a href="#" id="add" style="display:none;">Add</a>
                        <br/>

                        <form:errors path="applications" cssStyle="color:red"/>
                    </td>

                </tr>


                <tr>
                    <td>Initial requirements</td>
                    <td><form:textarea cols="35" rows="5" path="description"/></td>
                    <td><form:errors path="description" cssStyle="color:red"/></td>
                </tr>

                <security:authorize ifAllGranted="ROLE_ADMIN">
                    <c:if test="${statuces ne null}">
                        <tr>
                            <td>Status <span class="required">*</span></td>
                            <td><form:select path="status">
                                <form:options items="${statuces}" itemValue="statusId" itemLabel="alias"/>
                            </form:select>
                            </td>
                            <td><form:errors path="status" cssStyle="color:red"/></td>
                        </tr>
                    </c:if>


                    <c:if test="${resources ne null}">
                        <tr>
                            <td>Resource</td>
                            <td><form:select path="resource">
                                <option selected="selected" value="">Map order to resource</option>
                                <form:options items="${resources}" itemValue="resourceId" itemLabel="hostName"/>
                            </form:select>
                            </td>
                            <td><form:errors path="status" cssStyle="color:red"/></td>
                        </tr>
                    </c:if>




                </security:authorize>

                <tr>
                    <td></td>
                    <td align="right"><input type="submit" value="submit" class="button" id="submit"></td>
                    <td></td>
                </tr>


            </table>
        </fieldset>
    </form:form>
</div>













